<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <meta name="description" content="">
    <title>UNIS Design System v4</title>
    <meta name="author" content="">
    <meta name="generator" content="">
    <link rel="stylesheet" href="css/bootstrap.css">
    <link rel="stylesheet" href="../styles/global.css">
    <link rel="stylesheet" href="css/unis.css">
</head>
<body >
<header >
        <h2>UNIS</h2>
        <span style="font-size: 14px;"> Design System | Client Portal (Web)</span>
        <span class="badge badge-light" style="background: #56A7FD; color: #ffffff; ">V4</span>
    <div class="col-3" style="text-align: right ;line-height: 70px;">Last updated on 2/18/19</div>
</header>
<aside>

    <div class="d-flex flex-row alerts">
        <a href="./grid-system.html" class="alert-link" target="myFrameName">01. Grid System & Spacing</a>
        <i class=" mr-auto unis-arrow right " style="font-size: 14px; color: white"></i>
    </div>

    <div class="d-flex flex-row alerts">
        <a href="./colors-shadows.html" class="alert-link" target="myFrameName">02. Colors & Shadows</a>
        <div class=" mr-auto unis-arrow right sm-icon "></div>
    </div>
    <div class="d-flex flex-row alerts">
        <a href="./typography.html" class="alert-link" target="myFrameName">03. Typography</a>
        <div class=" mr-auto unis-arrow right sm-icon "></div>
    </div>
    <div class="d-flex flex-row alerts">
        <a href="./components.html" class="alert-link" target="myFrameName"> 04. Components</a>
        <div class=" mr-auto unis-arrow right sm-icon "></div>
    </div>
    <div class="d-flex flex-row alerts">
        <a href="./uiElements.html" class="alert-link" target="myFrameName"> 05. UI Elements / Modals</a>
        <div class=" mr-auto unis-arrow right sm-icon "></div>
    </div>

    <div class="d-flex flex-row alerts">
        <a href="./fonts-icon.html" class="alert-link" target="myFrameName"> 06. Iconography</a>
        <div class=" mr-auto unis-arrow right sm-icon "></div>
    </div>
    <div class="d-flex flex-row alerts">
        <a href="images.html" class="alert-link" target="myFrameName"> 07. Illustrations</a>
        <i class=" mr-auto unis-arrow right"  style="font-size: 14px; color: white"></i>
    </div>
    <div class="d-flex flex-row alerts">
        <a href="./download.html" class="alert-link" target="myFrameName">Application Specification </a>
        <i class=" mr-auto unis-arrow right " style="font-size: 14px; color: white"></i>
    </div>
    <div class="d-flex flex-row alerts">
        <a href="../kendo-ui/kendo-ui.html" class="alert-link" target="myFrameName">Kendo Unis Ui  </a>
        <i class=" mr-auto unis-arrow right " style="font-size: 14px; color: white"></i>
    </div>

    <div class="unis-aside d-flex flex-row" style="width: 100% !important; padding-left: 20px">
        <ul style="width: 100%">
            <li>
                <input type="radio" name="nav">Parcel Project Components
                <ul style="width: 100% !important; background: transparent" >
                  <li>
                      <a href="example-pages/parcel-project/login.html" class="alert-link" target="myFrameName">Login  </a>
                  </li>
                    <li>
                        <a href="example-pages/parcel-project/single-ship.html" class="alert-link" target="myFrameName">Single Ship  </a>
                    </li>
                    <li>
                        <a href="example-pages/parcel-project/batch-ship.html" class="alert-link" target="myFrameName">Batch Ship  </a>
                    </li>
                    <li>
                        <a href="example-pages/parcel-project/ship-history.html" class="alert-link" target="myFrameName">Ship History  </a>
                    </li>
                    <li>
                        <a href="example-pages/parcel-project/address-book.html" class="alert-link" target="myFrameName">Address Book  </a>
                    </li>
                    <li>
                        <a href="example-pages/parcel-project/invoices.html" class="alert-link" target="myFrameName">Invoices  </a>
                    </li>
                    <li>
                        <a href="example-pages/parcel-project/settings.html" class="alert-link" target="myFrameName">Settings  </a>
                    </li>
                    <li>
                        <div class="a">

                        </div>
                    </li>
                </ul>
            </li>

        </ul>
    </div>
</aside>

<section >
    <iframe src="./grid-system.html"  name="myFrameName" class="indexIframe"  frameborder="0" ></iframe>
</section>
</body>
</html>
